<!DOCTYPE html>
<html style="height: 100%;">
	<head>
		<meta charset="utf-8">
		<title>游戏主页</title>
		<script src="js/jquery.js"></script>
		<!-- 引入插件 -->
		<!-- 引入uploader插件 -->
				<link rel="stylesheet" type="text/css" href="plugins/webuploader.css"/>
				<script type="text/javascript" src="plugins/webuploader.js"></script>
		<script>
					//页面加载后触发
					$(function(){
						//直接初始化上传控件
						initWebUploader();
						
						//获取登录的用户凭证
						var nickName = localStorage.getItem("nickname");
						//获取头像
						var header = localStorage.getItem("header");
						//获取用户名
						var username = localStorage.getItem("username");
						
						//判断是否已经登录
						if(username == null){
							//强制跳转到登录页
							location.href="index.html";
						}
						//判断头像是否存在
						if(header != "null"){
							//头像替换
							$("#header").attr("src", "http://localhost:8080/img/getImg?imgName=" + header);
						}
						//替换昵称
						$("#nickname").html(nickName);
					});
					
					/**
					 * 初始化文件上传插件
					 */
					function initWebUploader(){
						// 初始化Web Uploader
						var uploader = WebUploader.create({
						    // 选完文件后，是否自动上传。
						    auto: true,
						    // swf文件路径
						    swf: 'plugins/Uploader.swf',
						    // 文件接收服务端。
						    server: 'http://localhost:8080/img/uploader',
						    // 选择文件的按钮。可选。
						    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
						    pick: '#filePicker',
							//上传图片额外携带的数据
							formData: {
								username: localStorage.getItem("username")
							}
						});
						
						//设置上传成功的回调
						uploader.on("uploadSuccess", function(file, response){
							// alert(response._raw);
							//更新本地头像
							localStorage.setItem("header",response._raw);
							//更新头像地址
							$("#header").attr("src", "http://localhost:8080/img/getImg?imgName=" + response._raw);
						});
					}
		
		
		//注销用户
		function logout(){
			localStorage.removeItem("nickname");
			localStorage.removeItem("username");
			localStorage.removeItem("password");
			location.href="index.html";
		}
		</script>
		<style>
		.body_class{
			background-color: #FFE4C4;
			display: flex;
			flex-direction: row;
			width: 100%;
			height: 100%;
		}
		.left_div{
			width: 25%;
			/* background-color: aqua; */
			height: 100%;
			border-right: 1px solid black;
			display: flex;
			flex-direction: column;
			padding: 20px;
		}
		.right_div{
			width: 75%;
			/* background-color: aquamarine; */
			height: 100%;
		}
		
		.header_class{
			width: 100px;
			height: 100px;
			border-radius: 50%;
		}
		.update_header_btn{
			margin-left: 20px;
			
			border-radius: 10px;
		}
		.nickname_span{
			margin-top: 20px;
		}
		.logout_btn{
			margin-top: 5px;
			height: 20px;
			width: 50px;
			display: flex;
			flex-direction: row;
			border-radius: 10px;
			
		}
		.enter_btn{
			border-radius: 10px;
			margin-left: 10px;
		}
		</style>
	</head>
	<body style="background-color: #FFE4C4;" class="body_class">
		
		<div class="left_div">
			<!-- 头像 -->
			<div style="display: flex;flex-direction: row;">
			<img id="header" class="header_class" src="img/header.jpg" width="50px;" height="50px;"/>
			<!-- <button class="update_header_btn">更新头像</button> -->
			<div id="filePicker" class="update_header_btn">更新头像</div>
			</div>
			<!-- 昵称 -->
			<span class="nickname_span" id="nickname">昵称</span>
			<div style="display: flex;flex-direction: row;align-items: center;">
			<span>欢乐豆:xxx<button class="enter_btn">充值</button></span>
			</div>
			<button class="logout_btn" onclick="logout()">注销</button>
		</div>
		<div class="right_div">
			工作区
		</div>
	</body>
</html>
